import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // state提供唯一的公共数据源，所有共享的数据都统一放到store的state中进行存贮
  state: {
    count: 0
  },
  // getters用于对Store中的数据进行加工形成新的数据，只起到包装数据的作用
  // store中的数据改变getter的数据也随之改变
  getters: {
    showNum(state) {
      return '当前最新的数量是【' + state.count + '】'
    }
  },
  // 只要mutations中定义的函数，才有权利修改state中的数据，
  // mutations可以集中监控所有数据的变化
  // 不要在mutations函数里面执行异步操作
  mutations: {
    add(state) {
      state.count++
    },
    addN(state, step) { // step表示要加的数值
      state.count += step
    },
    sub(state) {
      state.count--
    },
    subN(state, step) { // step表示要减的数值
      state.count -= step
    }
  },
  // actions用于处理异步任务
  // 但在action中还是要通过触发mutation的方式间接变更数据
  // 在action中不能直接修改state中的数据,需要通过context.commit()函数触发某个mutation函数
  actions: {
    addAsync(context) {
      // setTimeout设置延时器操作
      setTimeout(() => { context.commit('add') }, 500)
    },
    addNAsync(context, step) {
      // setTimeout设置延时器操作
      setTimeout(() => { context.commit('addN', step) }, 500)
    },
    subAsync(context) {
      // setTimeout设置延时器操作
      setTimeout(() => { context.commit('sub') }, 500)
    },
    subNAsync(context, step) {
      // setTimeout设置延时器操作
      setTimeout(() => { context.commit('subN', step) }, 500)
    }
  },
  // modules
  modules: {
  }
})
